<template>
  <div
    class="el-tree-node"
    @click.stop="handleClick"
    @contextmenu="($event) => this.handleContextMenu($event)"
    v-show="node.visible"
    :class="{
      'is-expanded': expanded,
      'is-current': node.isCurrent,
      'is-hidden': !node.visible,
      'is-focusable': !node.disabled,
      'is-checked': !node.disabled && node.checked,
      'child-first': node.data.type === '0',
      'child-second': node.data.type === '1',
      'child-second': node.data.type === '2' && node.childNodes.length !== 0,
      'child-third': node.data.type === '2' && node.childNodes.length === 0,
      'child-third': node.data.type === '3',
    }"
    role="treeitem"
    tabindex="-1"
    :aria-expanded="expanded"
    :aria-disabled="node.disabled"
    :aria-checked="node.checked"
    :draggable="tree.draggable"
    @dragstart.stop="handleDragStart"
    @dragover.stop="handleDragOver"
    @dragend.stop="handleDragEnd"
    @drop.stop="handleDrop"
    ref="node"
  >
    <div class="el-tree-node__content"
      :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }"
      :class="getNowClassByType(node)">
      <el-checkbox
        v-if="showCheckbox"
        v-model="node.checked"
        :indeterminate="node.indeterminate"
        :disabled="!!node.disabled || !isEnabled"
        @click.native.stop
        @change="handleCheckChange"
      >
      </el-checkbox>
      <span
        v-if="node.loading"
        class="el-tree-node__loading-icon el-icon-loading">
      </span>
      <node-content :node="node"></node-content>
    </div>
    <el-collapse-transition>
      <div
        class="el-tree-node__children"
        :class="getNowClassByType(node)"
        v-if="!renderAfterExpand || childNodeRendered"
        v-show="expanded"
        role="group"
        :aria-expanded="expanded"
      >
        <template v-if="isThirdNode(node.childNodes)">
          <el-tree-node
            v-if="getChildListNodes(node.childNodes)"
            :render-content="renderContent"
            :render-after-expand="renderAfterExpand"
            :show-checkbox="showCheckbox"
            :node="getChildListNodes(node.childNodes)"
            @node-expand="handleChildNodeExpand">
          </el-tree-node>
          <el-tree-node
            :isEnabled="getChildListNodes(node.childNodes) && getChildListNodes(node.childNodes).checked"
            :render-content="renderContent"
            v-for="child in getChildSiblingNodes(node.childNodes)"
            :render-after-expand="renderAfterExpand"
            :show-checkbox="showCheckbox"
            :key="getNodeKey(child)"
            :node="child"
            @node-expand="handleChildNodeExpand">
          </el-tree-node>
        </template>
        <template v-else>
          <el-tree-node
            :render-content="renderContent"
            v-for="child in node.childNodes"
            :render-after-expand="renderAfterExpand"
            :show-checkbox="showCheckbox"
            :key="getNodeKey(child)"
            :node="child"
            @node-expand="handleChildNodeExpand">
          </el-tree-node>
        </template>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script type="text/jsx">
import ElCollapseTransition from 'element-ui/src/transitions/collapse-transition'
import ElCheckbox from 'element-ui/packages/checkbox'
import emitter from 'element-ui/src/mixins/emitter'
import { getNodeKey } from './model/util'

export default {
  name: 'ElTreeNode',

  componentName: 'ElTreeNode',

  mixins: [emitter],

  props: {
    node: {
      default () {
        return {}
      }
    },
    isEnabled: {
      type: Boolean,
      default: true
    },
    props: {},
    renderContent: Function,
    renderAfterExpand: {
      type: Boolean,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      default: false
    }
  },

  components: {
    ElCollapseTransition,
    ElCheckbox,
    NodeContent: {
      props: {
        node: {
          required: true
        }
      },
      render (h) {
        const parent = this.$parent
        const tree = parent.tree
        const node = this.node
        const { data, store } = node
        return (
          parent.renderContent
            ? parent.renderContent.call(parent._renderProxy, h, { _self: tree.$vnode.context, node, data, store })
            : tree.$scopedSlots.default
              ? tree.$scopedSlots.default({ node, data })
              : <span class="el-tree-node__label">{ node.label }</span>
        )
      }
    }
  },

  data () {
    return {
      tree: null,
      expanded: false,
      childNodeRendered: false,
      oldChecked: null,
      oldIndeterminate: null
    }
  },

  watch: {
    'node.indeterminate' (val) {
      this.handleSelectChange(this.node.checked, val)
    },

    'node.checked' (val) {
      this.handleSelectChange(val, this.node.indeterminate)
    },

    'node.expanded' (val) {
      this.$nextTick(_ => { this.expanded = val })
      if (val) {
        this.childNodeRendered = true
      }
    }
  },
  methods: {
    isThirdNode (childNodes) {
      return childNodes[0] && (childNodes[0].data.type === '2' || childNodes[0].data.type === '3') && childNodes[0].childNodes.length === 0
    },
    getChildListNodes (childNodes) {
      const listNode = childNodes.find(node => {
        return node && node.data.text === 'list'
      })
      return listNode
    },
    getChildSiblingNodes (childNodes) {
      const siblingNodes = childNodes.filter(node => {
        return node && node.data.text !== 'list'
      })
      return siblingNodes
    },
    getNowClassByType (node) {
      let className = ''
      if (node.data.type === '0') {
        className = 'child-first'
      } else if (node.data.type === '1') {
        className = 'child-second'
      } else if (node.data.type === '2' && node.childNodes.length !== 0) {
        className = 'child-second tab-class'
      } else if (node.data.type === '2') {
        className = 'child-third'
      } else if (node.data.type === '3') {
        className = 'child-third'
      }
      return className
    },
    getNodeKey (node) {
      return getNodeKey(this.tree.nodeKey, node.data)
    },

    handleSelectChange (checked, indeterminate) {
      if (this.oldChecked !== checked && this.oldIndeterminate !== indeterminate) {
        this.tree.$emit('check-change', this.node.data, checked, indeterminate)
      }
      this.oldChecked = checked
      this.indeterminate = indeterminate
    },

    handleClick () {
      const store = this.tree.store
      store.setCurrentNode(this.node)
      this.tree.$emit('current-change', store.currentNode ? store.currentNode.data : null, store.currentNode)
      this.tree.currentNode = this
      if (this.tree.expandOnClickNode) {
        this.handleExpandIconClick()
      }
      if (this.tree.checkOnClickNode && !this.node.disabled) {
        this.handleCheckChange(null, {
          target: { checked: !this.node.checked }
        })
      }
      this.tree.$emit('node-click', this.node.data, this.node, this)
    },

    handleContextMenu (event) {
      if (this.tree._events['node-contextmenu'] && this.tree._events['node-contextmenu'].length > 0) {
        event.stopPropagation()
        event.preventDefault()
      }
      this.tree.$emit('node-contextmenu', event, this.node.data, this.node, this)
    },

    handleExpandIconClick () {
      if (this.node.isLeaf) return
      if (this.expanded) {
        this.tree.$emit('node-collapse', this.node.data, this.node, this)
        this.node.collapse()
      } else {
        this.node.expand()
        this.$emit('node-expand', this.node.data, this.node, this)
      }
    },
    handleCheckChange (value, ev) {
      const siblingNodes = this.node.parent.childNodes
      if (this.node.data.text === 'list') {
        siblingNodes.forEach(node => {
          if (node.data.text === 'list') return
          if (!value) {
            node.checked = false
          }
        })
      }
      this.node.setChecked(ev.target.checked, !this.tree.checkStrictly)
      this.$nextTick(() => {
        const store = this.tree.store
        this.tree.$emit('check', this.node.data, {
          checkedNodes: store.getCheckedNodes(),
          checkedKeys: store.getCheckedKeys(),
          halfCheckedNodes: store.getHalfCheckedNodes(),
          halfCheckedKeys: store.getHalfCheckedKeys()
        })
      })
    },

    handleChildNodeExpand (nodeData, node, instance) {
      this.broadcast('ElTreeNode', 'tree-node-expand', node)
      this.tree.$emit('node-expand', nodeData, node, instance)
    },

    handleDragStart (event) {
      if (!this.tree.draggable) return
      this.tree.$emit('tree-node-drag-start', event, this)
    },

    handleDragOver (event) {
      if (!this.tree.draggable) return
      this.tree.$emit('tree-node-drag-over', event, this)
      event.preventDefault()
    },

    handleDrop (event) {
      event.preventDefault()
    },

    handleDragEnd (event) {
      if (!this.tree.draggable) return
      this.tree.$emit('tree-node-drag-end', event, this)
    }
  },

  created () {
    const parent = this.$parent

    if (parent.isTree) {
      this.tree = parent
    } else {
      this.tree = parent.tree
    }

    const tree = this.tree
    if (!tree) {
      // console.warn('Can not find node\'s tree.')
    }

    const props = tree.props || {}
    const childrenKey = props.children || 'children'

    this.$watch(`node.data.${childrenKey}`, () => {
      this.node.updateChildren()
    })

    if (this.node.expanded) {
      this.expanded = true
      this.childNodeRendered = true
    }

    if (this.tree.accordion) {
      this.$on('tree-node-expand', node => {
        if (this.node !== node) {
          this.node.collapse()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-checkbox {
    margin-right: 10px;
  }
  .el-tree-node.child-first {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #999;
    border-radius: 5px;
  }
  .el-tree-node.child-second {
    width: 100%;
  }
  .el-tree-node__content.child-first {
    font-weight: bold;
    .el-tree-node__label {
      font-size: 16px;
    }
  }
  .el-tree-node__content:hover {
    background-color: #fff;
  }
  .el-tree-node__content.child-third {
    min-width: 180px;
  }
  .el-tree-node__content.child-third:hover {
    background-color: #f5f5f5;
  }
  .el-tree-node__children.child-second {
    padding: 10px;
    background-color: #f5f5f5;
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
  }
  .tab-class {
    margin-left: 80px !important;
  }
  .el-tree-node:focus>.el-tree-node__content {
    background-color: #fff;
  }
  .el-tree-node__content:hover {
    background-color: #fff;
  }
</style>
